<template>
  <div class="dateTopHeightStyle">
    <avue-crud :data="data"
               :option="option"
               :page="page"
               :key="key"
               @on-load="changePage"
               @row-save="save"
               @row-update="update"
               @row-del="remove"
               @sort-change="changeSort"
               @search-change="search"
               @size-change="sizeChange"
               @current-change="currentChange">
      <template slot="searchMenu">
        <el-button size="small" v-for="(item,index) in buttonSelf" :key="index" @click="selfButton(item.prop)">{{item.label}}
        </el-button>
      </template>
    </avue-crud>
  </div>
</template>

<script>
  export default {
    name: 'common-table',
    props: {
      data: {
        type: Array,
        default: function () {
          return []
        }
      },
      option: {
        type: Object,
        default: function () {
          return {}
        }
      },
      page: {
        type: Object,
        default: function () {
          return {}
        }
      },
      buttonSelf: {
        type: Array,
        default: function () {
          return []
        }
      },
      key: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    data () {
      return {
        // isShowFlag: false
      }
    },
    methods: {
      changePage (page) {
//        请求参数
//        page.currentPage
//        page.pageSize
        this.$emit('changePage', page)
      },
      changeSort (params) {
//        请求参数
//        params.prop 字段名
//        params.order 升序降序
        this.$emit('changeSort', params)
      },
      save () {

      },
      update () {

      },
      remove () {

      },
      search (params, done) {
        done()
        this.$emit('search', params)
      },
      // 自定义按钮
      selfButton(prop) {
        this.$emit('selfButton', prop)
      },
      sizeChange (i) {
        this.$emit('sizeChange', i)
      },
      currentChange (j) {
        this.$emit('currentChange', j)
      }
    }
  }
</script>

<style scoped>

</style>
